<template>
  <!-- 请拍摄   16:9 -->
  <view class="shootSix">
    <view class="cancelimg" @click="closeHandle">
      <u-icon name="close-circle" color="#fff" size="35"></u-icon>
    </view>

    <view class="membersShoot-photo" :style="{ height: camHeight + 'px' }">
      <camera
        v-if="cameraShow && camHeight != 0"
        :device-position="devicePosition"
        flash="off"
        @error="error"
      ></camera>
      <image v-else :src="faceBase64" mode=""></image>
    </view>

    <view
      class="btnCam"
      :class="!photo ? 'shootBtm' : 'confirmBtn'"
      @click="takePhotoHandle"
    >
      {{ !photo ? "拍摄" : "确定" }}
    </view>
  </view>
</template>

<script>
import { Toast, navBack } from "@/utils/util.js";

export default {
  data() {
    return {
      baseImgUrl: this.baseImgUrl,
      devicePosition: "back",
      camHeight: 0,
      cameraShow: true,
      photo: "",
      faceBase64: "",
    };
  },
  mounted() {
    uni
      .createSelectorQuery()
      .select(".shootSix")
      .boundingClientRect((data) => {
        console.log(data, "data");

        // let height = (data.width * 2 * 9) / 16;
        // this.camHeight = height;
        // console.log(this.camHeight, "多少的");

        let width = data.width;
        this.camHeight = (width / 16) * 9;
        console.log(this.camHeight, "多少的");
      })
      .exec();
  },
  methods: {
    // 拍摄
    takePhotoHandle() {
      let _this = this;

      if (_this.photo) {
        // faceBase64
        navBack();
        return;
      }

      uni.getSetting({
        success(res) {
          if (res.authSetting["scope.camera"]) {
            _this.contextPhoto();
          } else {
            // 授权
            uni.authorize({
              scope: "scope.camera",
              success() {
                _this.contextPhoto();
              },
              fail() {
                _this.shootOpen();
              },
            });
          }
        },
      });
    },
    shootOpen() {
      let that = this;
      uni.openSetting({
        success(res) {
          if (res.authSetting["scope.camera"]) {
            that.contextPhoto();
          }
        },
      });
    },
    //拍照
    contextPhoto() {
      let that = this;
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: "high",
        success: (res) => {
          that.photo = res.tempImagePath;
          that.cameraShow = false;
          that.miniImage();
        },
      });
    },
    miniImage() {
      let that = this;
      uni.getFileSystemManager().readFile({
        filePath: that.photo,
        encoding: "base64",
        success(res2) {
          that.faceBase64 = "data:image/png;base64," + res2.data;
        },
      });
    },
    closeHandle() {
      console.log("总做祖宗组");
      this.photo = "";
      this.faceBase64 = "";
    },
    error(e) {
      console.log(e.detail, "错了");
    },
  },
};
</script>

<style lang="scss" scoped>
.shootSix {
  height: 100vh;
  background: #000;
  position: relative;

  .cancelimg {
    position: absolute;
    top: 35rpx;
    left: 45rpx;
    z-index: 9999;
  }

  .membersShoot-photo {
    position: relative;
    background: palevioletred;
    camera {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    image {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }

  .btnCam {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 25rpx;
    font-size: 38rpx;
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
    color: #fff;
  }
  .shootBtm {
    background: #888;
  }

  .confirmBtn {
    background: #07c160;
  }
}
</style>
